import { useImperativeHandle, forwardRef } from 'react'
import FormContext from '../FormContext'
import useForm from '../useForm'

/* 
    接收 onFinish | onFinishFailed 
    可以被 ref 标记 ，ref 可以获取 FormStore 核心方法
    保留原生 form 的属性 当submit 或者 reset 触发时，自动校验
*/
function From({ form, onFinish, onFinishFailed, initialValue, children }, ref) {
	// 创建 form 状态管理实例
	const [formInstance] = useForm(form, initialValue)

	/* 抽离属性 dispatch/setCallback这两个方法不能对外提供 */
	const { setCallback, dispatch, ...providerFormInstance } = formInstance
	// 向 form 注册回调函数
	setCallback({
		onFinish,
		onFinishFailed,
	})
	/* form 能被 ref  标记，并操作实例 */
	useImperativeHandle(ref, () => providerFormInstance, [])

	// 传递
	const RenderChidren = (
		<FormContext.Provider value={formInstance}>
			{children}
		</FormContext.Provider>
	)

	return (
		<form
			onReset={(e) => {
				e.preventDefault()
				e.stopPropagation()
				formInstance.resetFields() /* 重置表单 */
			}}
			onSubmit={(e) => {
				e.preventDefault()
				e.stopPropagation()
				formInstance.submit() /* 提交表单 */
			}}
		>
			{RenderChidren}
		</form>
	)
}
export default forwardRef(From)
